<template>
  <div class="topbar">
    <div class="wrap">
      <div class="l">欢迎来到启明商城</div>
      <div class="r">
        <ul>
          <li @click="hdClick">
            <img
              height="26"
              src="@/assets/img/启明.jpg"
              alt=""
              v-show="isLogined"
            />
            <span v-show="!isLogined">用户名:游客</span>
            <span v-show="isLogined">用户名:夏启明</span>
          </li>
          <li @click="hdClick">我的余额--</li>
          <li @click="hdClick">充值余额</li>
          <li @click="hdClick">启明商城官网</li>
          <li
            class="btn"
            @click="changeIsShowLoginModal(true)"
            v-show="!isLogined"
          >
            登录
          </li>
          <li class="btn cart-btn" v-show="isLogined">
            <i class="el-icon-shopping-cart-2"></i>
            <span>购物车</span>
            <b>{{ cartTotal }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      name: "游客",
      cartTotal: 0,
    };
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        let mytoken = localStorage.getItem("x-auth-token");
        this.changeIsLogined(Boolean(mytoken));
        // console.log(val.fullPath);
      },
      // 深度观察监听
      // deep: true
    },
  },
  computed: {
    ...mapState({
      isLogined: (state) => state.LoginStatus.isLogined,
    }),
  },
  methods: {
    ...mapMutations({
      changeIsShowLoginModal: "ShowLoginModal/changeIsShowLoginModal",
      changeIsShowToast: "toastStatus/changeIsShowToast",
      changeIsLogined: "LoginStatus/changeIsLogined",
    }),
    ...mapActions({
      asyncchangeIsShowToast: "toastStatus/asyncchangeIsShowToast",
    }),
    hdClick() {
      if (this.isLogined != true) {
        this.asyncchangeIsShowToast({
          msg: "请先登录!!",
          //success  成功
          //warni    警告
          //err      失败
          type: "warning",
        });
      }
    },
  },
};
</script>
<style  lang="less" scoped>
@import "../assets/css/global.less";

.topbar {
  height: 40px;
  background-color: grey;
  font-size: 14px;
  font-family: SourceHanSansSc;
  font-weight: 300;
  color: white;
  line-height: 40px;

  .wrap {
    background-color: red;
    height: 40px;
    display: flex;
    justify-content: space-between;

    .r ul {
      display: flex;

      li {
        display: flex;
        align-items: center;
        margin-left: 20px;
        cursor: pointer;

        img {
          border-radius: 50%;
          margin-right: 6px;
        }

        &.btn {
          width: 124px;
          height: 40px;
          background-color: @base-color;
          justify-content: center;
        }

        &.cart-btn {
          b {
            width: 22px;
            height: 22px;
            background-color: red;
            border-radius: 11px;
            line-height: 22px;
            text-align: center;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style>